<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="配送列表" placeholder fixed />
    <!-- tab标签 -->
    <van-tabs
      v-model="active"
      color="#1989fa"
      swipeable
      lazy-render
      sticky
      offset-top="46"
    >
      <van-tab title="待配送">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <div class="order">
            <van-card v-for="v in orderingList" :key="v.orderID">
              <template #title>
                <div class="order_title">
                  <span class="order_time">{{
                    v.orderDate | dateFormat0
                  }}</span>
                  <span class="order_address"
                    ><i>{{ v.orderTrainNum }} </i>号车厢
                    <i>{{ v.orderTrainSeat }}</i></span
                  >
                </div>
              </template>
              <template #desc>
                <div class="food_name">
                  {{ v.orderFood | handleOrderFoods }}
                </div>
              </template>
              <template #tags>
                <div class="info">
                  <span class="name">{{ v.orderUserName }}</span>
                  <span class="tel"
                    ><i>{{ v.userPhone}}</i></span
                  >
                </div>
              </template>
              <template #price>
                <div class="food_price">
                  ￥<span>{{ v.orderMoney }}</span>
                </div>
              </template>
              <template #num>
                <div
                  :class="
                    v.paymentMethod == '现金' ? 'pay_method0' : 'pay_method1'
                  "
                >
                  {{ v.paymentMethod == "现金" ? "未付款" : "已付款" }}
                </div>
              </template>
              <template #footer>
                <div class="btns">
                  <van-button type="default" size="small" @click="toCall(v.userPhone)"
                    >联系顾客</van-button
                  >
                  <van-button type="info" size="small" @click="toValid(v.orderID)"
                    >确认送达</van-button
                  >
                </div>
              </template>
            </van-card>
            <van-divider>我也是有底线的</van-divider>
          </div>
        </van-pull-refresh>
      </van-tab>

      <van-tab title="已送达">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <div class="order">
            <van-card v-for="v in orderedList" :key="v.orderID">
              <template #title>
                <div class="order_title">
                  <span class="order_time">{{
                    v.orderDate | dateFormat1
                  }}</span>
                  <span class="order_address"
                    ><i>{{ v.orderTrainNum }} </i>号车厢
                    <i>{{ v.orderTrainSeat }}</i></span
                  >
                </div>
              </template>
              <template #desc>
                <div class="food_name">
                  {{ v.orderFood | handleOrderFoods }}
                </div>
              </template>
              <template #tags>
                <div class="info">
                  <span class="name">{{ v.orderUserName }}</span>
                  <span class="tel"
                    ><i>{{ v.userPhone }}</i></span
                  >
                </div>
              </template>
              <template #price>
                <div class="food_price">
                  ￥<span>{{ v.orderMoney }}</span>
                </div>
              </template>
              <template #num>
                <div class="pay_method1">
                  已支付
                </div>
              </template>
              <template #footer>
                <div class="btns">
                  <van-button type="default" size="small" @click="toCall(v.userPhone)"
                    >联系顾客</van-button
                  >
                </div>
              </template>
            </van-card>
            <van-divider>我也是有底线的</van-divider>
          </div>
        </van-pull-refresh>
        
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { Dialog, Toast } from "vant";
export default {
  data() {
    return {
      // 待配送订单0
      orderingList: [],
      //已送达订单1
      orderedList: [],
      isLoading: false,
      active: 0
    };
  },
  created() {
    // 获取订单信息
    this.getOrderList();
  },
  methods: {
    // 获取订单信息
    async getOrderList() {
      //发送请求
      const { data: res } = await this.$http.get("order");
      //  处理后台传来的食物格式
      res.data.forEach(v => {
        v.orderFood = v.orderFood.split(",").map(m => m.split(" "));
      });
      // 将订单按照时间降序
      this.orderingList = res.data
        .filter(v => v.orderState == 0)
        .sort((a, b) => b.orderDate - a.orderDate);
      this.orderedList = res.data
        .filter(v => v.orderState == 1)
        .sort((a, b) => b.orderDate - a.orderDate);
    },
    //打电话给顾客
    toCall(phone) {
      var message = "您确定要拨打顾客电话"+ phone + "吗？"
      console.log(phone);
      
      Dialog.confirm({
        title: "联系顾客",
        message
      })
        .then(() => {})
        .catch(() => {});
    },
    //下拉刷新功能
    async onRefresh() {
      this.getOrderList();
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
    // 点击确认按钮
    toValid(id) {
      Dialog.confirm({
        title: "确认订单",
        message: "您确定订单已经送达给顾客了吗？"
      })
        .then(async () => {
          //确认发送请求
          console.log(id);
          const { data: res } = await this.$http.put('/delivery/'+id,{
            orderState: '1'
          })
          Toast.success("订单已确认");
          //需要重新加载订单页面
          this.getOrderList()
        })
        .catch(() => {});
    }
  },
  filters: {
    //处理食物显示
    handleOrderFoods: val => {
      var str = "";
      if (val.length > 2) {
        str =
          val[0][0] +
          "x" +
          val[0][1] +
          "," +
          val[1][0] +
          "x" +
          val[1][1] +
          "...";
      } else {
        val.forEach((v, i) => {
          str += v[0] + "x" + v[1];
          if (val.length - 1 != i) str += ",";
        });
      }
      return str;
    },
    //未送达时间处理 19min前
    dateFormat0: val => {
      const dt = new Date(Number(val));
      const nowdt = new Date();
      let span = nowdt - dt;
      // 小于1min 56s前 1min = 60s=60*1000ms
      if (span < 60 * 1000) return Math.floor(span / 1000) + "s前";
      //小于1小时 30min前
      if (span < 60 * 60 * 1000) return Math.floor(span / 60000) + "min前";
      //大于一小时 1h前
      return Math.floor(span / 3600000) + "h前";
    },
    //已送达时间处理  5-20 15：30
    dateFormat1: val => {
      const dt = new Date(Number(val));
      const m = (dt.getMonth() + 1 + "").padStart(2, 0);
      const d = (dt.getDate() + "").padStart(2, 0);
      const hh = (dt.getHours() + "").padStart(2, 0);
      const mm = (dt.getDate() + "").padStart(2, 0);
      return `${m}-${d} ${hh}:${mm}`;
    }
  }
};
</script>
<style lang="less" scoped>
.order {
  .order_title {
    display: flex;
    justify-content: space-between;
    padding: 5px 0 8px;
    font-size: 16px;
    .order_address i {
      color: #e67e22;
    }
  }
  .food_name {
    font-size: 16px;
    padding: 0 0 8px;
  }
  .info {
    padding: 0 0 8px;
    .name {
      padding: 0 3px 0 0;
      font-weight: 500;
      font-size: 16px;
    }
  }
  .food_price {
    font-size: 16px;
  }
  .pay_method0 {
    font-size: 14px;
    color: #e74c3c;
    padding: 0 9px 7px 0;
  }
  .pay_method1 {
    font-size: 14px;
    color: #07c160;
    padding: 0 9px 7px 0;
  }
}
</style>
